<!DOCTYPE html>
<html>

	<head>
		<title>客户关系管理系统-客户流失管理</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/normalize.min.css" />

		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<!--[if lte IE 8]>
			<script src="../../js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/respond.min.js" type="text/javascript" charset="utf-8"></script>
		<![endif]-->

		<!-- 界面自定义CSS文件 -->
		<link rel="stylesheet" type="text/css" href="../../css/custom/scrollbar-style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/custom/html-cust-lost.min.css" />

		<!--界面自定义JS文件-->
		<script src="../../js/custom/tip-popover.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/custom/html-cust-lost.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div class="container-fluid">

			<!--TODO 当前页面地理位置 (面包屑导航)-->
			<ul class="breadcrumb">
				<li>客户管理</li>
				<li>客户流失管理</li>
			</ul>

			<!--TODO 搜索表单及工具按钮-->
			<form id="form-search" method="get" class="form-inline">

				<div class="form-group">
					<label class="control-label">客户编号：</label>
					<div class="input-group">
						<span class="input-group-addon">CST</span>
						<input class="form-control" type="text" />
					</div>

					<label class="control-label">名称：</label>
					<input class="form-control" type="text" />

					<label class="control-label">状态：</label>
					<select class="form-control">
						<option>全部</option>
						<option class="bg-warning">预警</option>
						<option class="bg-info">暂缓流失</option>
						<option class="bg-danger">确认流失</option>
					</select>
				</div>

				<div class="form-group btn-group">
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-search"></span>
						查询
					</button>
				</div>

			</form>

			<hr />

			<!--TODO 数据列表-->
			<table class="table table-hover table-bordered">
				<thead class="bg-primary">
					<tr>
						<th class="hidden-xs">#</th>
						<th>客户名称</th>
						<th class="hidden-xs">客户经理</th>
						<th class="hidden-xs">活跃截至</th>
						<th>状态时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="hidden-xs">CST071202001</td>
						<td>聪海信息科技有限公司</td>
						<td class="hidden-xs">张先明</td>
						<td class="hidden-xs">2018/02/18</td>
						<td>
							<div class="text-success">
								暂缓
								<div class="visible-xs"></div>
								[2018/02/18]
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
								<button class="btn btn-default lost-option" title="操作">
									<span class="glyphicon glyphicon-cog"></span>
									<span class="hidden-xs">操作</span>
								</button>
							</div>
						</td>
					</tr>

					<tr>
						<td class="hidden-xs">CST071201008</td>
						<td>北京明科科技有限公司</td>
						<td class="hidden-xs">张先明</td>
						<td class="hidden-xs">2018/02/18</td>
						<td>
							<div class="text-warning">
								预警
								<div class="visible-xs"></div>
								[2018/02/18]
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
								<button class="btn btn-default lost-option" title="操作">
									<span class="glyphicon glyphicon-cog"></span>
									<span class="hidden-xs">操作</span>
								</button>
							</div>
						</td>
					</tr>

					<tr>
						<td class="hidden-xs">CST071201007</td>
						<td>太阳药业</td>
						<td class="hidden-xs">旺财</td>
						<td class="hidden-xs">2018/02/18</td>
						<td>
							<div class="text-warning">
								预警
								<div class="visible-xs"></div>
								[2018/02/18]
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
								<button class="btn btn-default lost-option" title="操作">
									<span class="glyphicon glyphicon-cog"></span>
									<span class="hidden-xs">操作</span>
								</button>
							</div>
						</td>
					</tr>

					<tr>
						<td class="hidden-xs">CST071201006</td>
						<td>云南天河烟草公司</td>
						<td class="hidden-xs">球球</td>
						<td class="hidden-xs">2018/02/18</td>
						<td>
							<div class="text-warning">
								预警
								<div class="visible-xs"></div>
								[2018/02/18]
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
								<button class="btn btn-default lost-option" title="操作">
									<span class="glyphicon glyphicon-cog"></span>
									<span class="hidden-xs">操作</span>
								</button>
							</div>
						</td>
					</tr>

					<tr>
						<td class="hidden-xs">CST071201005</td>
						<td>北京天桥信息技术有限公司 </td>
						<td class="hidden-xs">余海</td>
						<td class="hidden-xs">2018/02/18</td>
						<td>
							<div class="text-danger">
								流失
								<div class="visible-xs"></div>
								[2018/02/18]
								<span class="text-muted hidden-xs">原因：客户不想跟我们继续合作了，觉得我公司太坑！</span>
							</div>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

			<!--TODO 数据分页部分-->
			<div class="text-center">
				<ul class="pagination">
					<li class="disabled">
						<a>&lt;</a>
					</li>
					<li class="active">
						<a href="">1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
					<li>
						<a href="">&gt;</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- TODO 查看客户信息modal部分 -->
		<div class="modal fade" id="modal-show">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
						</button>
						<h3 class="modal-title">
							北京聪海信息科技有限公司
							<small>CST071202001</small>
						</h3>
					</div>

					<div class="modal-body mulit-panel-body">
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#tab-info" data-toggle="tab">信息</a>
							</li>
							<li>
								<a href="#tab-linkman" data-toggle="tab">联系人</a>
							</li>
							<li>
								<a href="#tab-activity" data-toggle="tab">交往记录</a>
							</li>
							<li>
								<a href="#tab-order" data-toggle="tab">历史订单</a>
							</li>
						</ul>

						<div class="tab-content">
							<div class="tab-pane fade in active" id="tab-info">
								<!--基础信息部分-->
								<table class="table table-condensed">
									<tr>
										<th class="bg-info text-right">编号</th>
										<td>CST071202001</td>
										<th class="bg-info text-right">名称</th>
										<td>北京聪海信息科技有限公司</td>
									</tr>
									<tr>
										<th class="bg-info text-right">地区</th>
										<td>北京</td>
										<th class="bg-info text-right">客户经理</th>
										<td>小明</td>
									</tr>
									<tr>
										<th class="bg-info text-right">等级</th>
										<td>战略合作伙伴</td>
										<th class="bg-info text-right">信用度</th>
										<td>
											<span class="text-success">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</span>
										</td>
									</tr>
									<tr>
										<th class="bg-info text-right">满意度</th>
										<td colspan="3">
											<span class="text-success">&#x2606;&#x2606;&#x2606;&#x2606;&#x2606;</span>
										</td>
									</tr>
									<tr>
										<td colspan="4">&nbsp;</td>
									</tr>
									<tr>
										<th class="bg-info text-right">地址</th>
										<td>北京市海淀区成府路702号</td>
										<th class="bg-info text-right">邮编</th>
										<td>100027</td>
									</tr>
									<tr>
										<th class="bg-info text-right">电话</th>
										<td>010-62283393</td>
										<th class="bg-info text-right">传真</th>
										<td>010-62283396</td>
									</tr>
									<tr>
										<th class="bg-info text-right">主页</th>
										<td colspan="3">http://www.conghai.com</td>
									</tr>
									<tr>
										<td colspan="4">&nbsp;</td>
									</tr>
									<tr>
										<th class="bg-info text-right">营业执照注册号</th>
										<td>xxxxxxx</td>
										<th class="bg-info text-right">法人</th>
										<td>聪颖</td>
									</tr>
									<tr>
										<th class="bg-info text-right">注册资金(万元)</th>
										<td>￥1000.00</td>
										<th class="bg-info text-right">年营业额(万元)</th>
										<td>￥3000.00</td>
									</tr>
									<tr>
										<th class="bg-info text-right">开户银行</th>
										<td>北京银行 中关村支行</td>
										<th class="bg-info text-right">银行账号</th>
										<td>62266226****0248</td>
									</tr>
									<tr>
										<th class="bg-info text-right">地税登记号</th>
										<td></td>
										<th class="bg-info text-right">国税登记号</th>
										<td></td>
									</tr>
								</table>

							</div>

							<div class="tab-pane fade" id="tab-linkman">
								<!--联系人部分-->
								<table class="table table-condensed">
									<thead>
										<tr class="bg-info">
											<th>姓名</th>
											<th class="hidden-xs">性别</th>
											<th>职位</th>
											<th class="hidden-xs">办公电话</th>
											<th class="hidden-xs">移动电话</th>
											<th class="visible-xs">联系电话</th>
											<th class="hidden-xs">备注</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>沈聪林</td>
											<td class="hidden-xs">男</td>
											<td>总经理</td>
											<td class="hidden-xs">010-68348438-668</td>
											<td class="hidden-xs">13622883228</td>
											<td class="visible-xs">
												010-68348438-668
												<br />13622883228
											</td>
											<td class="hidden-xs"></td>
										</tr>

										<tr>
											<td>杨影</td>
											<td class="hidden-xs">女</td>
											<td>总经理助理</td>
											<td class="hidden-xs">010-68348438-326</td>
											<td class="hidden-xs">13728838283</td>
											<td class="visible-xs">
												010-68348438-326
												<br />13728838283
											</td>
											<td class="hidden-xs"></td>
										</tr>
									</tbody>
								</table>

							</div>

							<div class="tab-pane fade" id="tab-activity">
								<!--交往记录部分-->
								<table class="table table-hover table-condensed">
									<thead>
										<tr class="bg-info">
											<th>时间</th>
											<th>主题</th>
											<th>地点</th>
											<th>详细信息</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>2018/01/09</td>
											<td>签订意向协议</td>
											<td>中电软件园</td>
											<td>... ...</td>
										</tr>
										<tr>
											<td>2018/01/10</td>
											<td>2018年行业展望座谈会</td>
											<td>中电软件园</td>
											<td>... ...</td>
										</tr>
										<tr>
											<td>2018/01/20</td>
											<td>邀请到公司参观</td>
											<td>永安小区</td>
											<td>... ...</td>
										</tr>
									</tbody>
								</table>

							</div>

							<div class="tab-pane fade" id="tab-order">
								<!--历史订单部分-->
								<table class="table table-hover">
									<thead>
										<tr class="bg-info">
											<th>#</th>
											<th>日期</th>
											<th>送货地址</th>
											<th>状态</th>
											<th>查看</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1343443</td>
											<td>
												<span class="visible-xs">2018/2/15<br/>15:24</span>
												<span class="hidden-xs">2018/2/15 15:24</span>
											</td>
											<td>北京海淀区劳动路205号</td>
											<td class="text-warning">未回款</td>
											<td>
												<button class="btn btn-xs btn-default" data-toggle="collapse" data-target="#order-table-1">
													<span class="glyphicon glyphicon-zoom-in"></span>
													<span class="hidden-xs">查看</span>
												</button>
											</td>
										</tr>
										<tr>
											<td colspan="5" class="order-table-parent-td">
												<div class="collapse" id="order-table-1">
													<table class="table table-bordered table-condensed">
														<thead>
															<tr class="bg-info">
																<th>商品</th>
																<th>单位</th>
																<th>数量</th>
																<th>单价(元)</th>
																<th>金额(元)</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>海龙笔记本电脑-i60-2688 9966</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,0800.00</td>
																<td>￥2,1600.00</td>
															</tr>
															<tr>
																<td>海龙笔记本电脑-i61-2689 6688</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,6800.00</td>
																<td>￥3,3600.00</td>
															</tr>
														</tbody>
														<tfoot>
															<tr>
																<th colspan="2" align="right">合计</th>
																<td>4</td>
																<td></td>
																<td>￥5,5200.00</td>
															</tr>
														</tfoot>
													</table>
												</div>
											</td>
										</tr>
										<tr>
											<td>1343444</td>
											<td>
												<span class="visible-xs">2018/2/14<br/>11:31</span>
												<span class="hidden-xs">2018/2/14 11:31</span>
											</td>
											<td>北京海淀区劳动路205号</td>
											<td class="text-success">已回款</td>
											<td>
												<button class="btn btn-xs btn-default" data-toggle="collapse" data-target="#order-table-2">
													<span class="glyphicon glyphicon-zoom-in"></span>
													<span class="hidden-xs">查看</span>
												</button>
											</td>
										</tr>
										<tr>
											<td colspan="5" class="order-table-parent-td">
												<div class="collapse" id="order-table-2">
													<table class="table table-bordered table-condensed">
														<thead>
															<tr class="bg-info">
																<th>商品</th>
																<th>单位</th>
																<th>数量</th>
																<th>单价(元)</th>
																<th>金额(元)</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>海龙笔记本电脑-i60-2688 9966</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,0800.00</td>
																<td>￥2,1600.00</td>
															</tr>
															<tr>
																<td>海龙笔记本电脑-i61-2689 6688</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,6800.00</td>
																<td>￥3,3600.00</td>
															</tr>
														</tbody>
														<tfoot>
															<tr>
																<th colspan="2" align="right">合计</th>
																<td>4</td>
																<td></td>
																<td>￥5,5200.00</td>
															</tr>
														</tfoot>
													</table>
												</div>
											</td>
										</tr>
										<tr>
											<td>1343445</td>
											<td>
												<span class="visible-xs">2018/2/13<br/>12:11</span>
												<span class="hidden-xs">2018/2/13 12:11</span>
											</td>
											<td>北京海淀区劳动路205号</td>
											<td class="text-success">已回款</td>
											<td>
												<button class="btn btn-xs btn-default" data-toggle="collapse" data-target="#order-table-3">
													<span class="glyphicon glyphicon-zoom-in"></span>
													<span class="hidden-xs">查看</span>
												</button>
											</td>
										</tr>
										<tr>
											<td colspan="5" class="order-table-parent-td">
												<div class="collapse" id="order-table-3">
													<table class="table table-bordered table-condensed">
														<thead>
															<tr class="bg-info">
																<th>商品</th>
																<th>单位</th>
																<th>数量</th>
																<th>单价(元)</th>
																<th>金额(元)</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>海龙笔记本电脑-i60-2688 9966</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,0800.00</td>
																<td>￥2,1600.00</td>
															</tr>
															<tr>
																<td>海龙笔记本电脑-i61-2689 6688</td>
																<td>台</td>
																<td>2</td>
																<td>￥1,6800.00</td>
																<td>￥3,3600.00</td>
															</tr>
														</tbody>
														<tfoot>
															<tr>
																<th colspan="2" align="right">合计</th>
																<td>4</td>
																<td></td>
																<td>￥5,5200.00</td>
															</tr>
														</tfoot>
													</table>
												</div>
											</td>
										</tr>
									</tbody>
								</table>

							</div>

						</div>

					</div>

					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 流失客户模态框部分 -->
		<div class="modal fade" data-backdrop="false" id="modal-lost">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title text-danger h3">
							<span>流失客户：</span>
							<span>云南天河烟草公司</span>
							<span>CST071201006</span>
						</div>
					</div>
					
					<div class="modal-body">
						<form id="form-lost">
							<div class="form-group">
								<label class="control-label">流失原因</label>
								<input class="form-control" />
							</div>
						</form>
					</div>
					
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">关闭</button>
						<button class="btn btn-danger" form="form-lost">确认流失</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>